<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input size="small" v-model="listQuery.device_serial_number" style="width: 200px;" :placeholder="$t('table.device_id')" clearable @change="handleFilter" />
      <el-input size="small" v-model="listQuery.device_name" style="width: 200px;" :placeholder="$t('table.device_name')" clearable @change="handleFilter" />
      <el-button type="primary" size="mini" @click="getLists">{{$t('table.search')}}</el-button>
      <add-page @getList="getLists"></add-page>
      <!-- <div style="display:inline-block;float:right">
        <el-button type="primary" size="mini" @click="openScans" :loading="btnLoading">{{$t('equipment.openScan')}}</el-button>
      </div> -->
      <el-button type="primary" size="mini" @click="pushBatchs">{{$t('equipment.pushBatch')}}</el-button>
      <el-button type="primary" size="mini" @click="uploadBatchs">{{$t('equipment.uploadBatch')}}</el-button>
      <el-button type="primary" size="mini" @click="pushBatchs">{{$t('equipment.reboot')}}</el-button>
      <el-button type="danger" size="mini" @click="deleteBatchs">{{$t('table.Massdelete')}}</el-button>
      <el-button type="danger" size="mini" @click="deletePersonBatchs">{{$t('equipment.deletePersonBatchs')}}</el-button>
      <time-zone-select class="set-language" />
      <el-button type="danger" size="mini" @click="OTAUpdateBatchs">{{$t('equipment.OTA_upgrade')}}</el-button>

    </div>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row :header-cell-style="{background:'#f2f2f2',color:'#606266',height:'10px',padding:'5px'}" height="634px"
      :row-style="{height:'40px',padding:'0px'}" :cell-style="{padding:'0px'}" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">

      </el-table-column>
      <el-table-column align="center" type="index">
        <template slot-scope="scope">
          {{(current_page - 1) * per_page + scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.device_id')" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.sn }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.device_name')" align="center">
        <template slot-scope="scope">
          {{ scope.row.device_name }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.status')" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.login==1" type="success">{{$t('table.online')}}</el-tag>
          <el-tag v-else type="info">{{$t('table.offline')}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.ip')" align="center">
        <template slot-scope="scope">
          {{ scope.row.server_ip }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.device_ip')" align="center">
        <template slot-scope="scope">
          {{ scope.row.device_ip }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" :label="$t('table.port')" align="center">
        <template slot-scope="scope">
          {{ scope.row.server_port }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.switch')">
        <template slot-scope="scope">
          <img src="~@/assets/img/switch.png" @click="switchs(scope.row)" style="cursor:pointer" alt="">
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.push_device')" min-width='180px'>
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="push(scope.row)">{{$t('equipment.push')}}</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.sync_person')" min-width='130px'>
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="sync(scope.row)">{{$t('equipment.sync')}}</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.operation')">
        <template slot-scope="scope">
          <edit-page :row_id="scope.row.sn" @getList="getLists"></edit-page>
          <el-button type="danger" size="mini" @click="del(scope.row.sn)">{{$t('table.delete')}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 删除对话框  star-->
    <el-dialog title="提示" :visible.sync="delDialogVisible" width="30%">
      <span>是否确定删除该数据？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="del()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除对话框 end-->
  </div>
</template>

<script>
import axios from "axios";
import store from "@/store";
import editPage from "./editPage";
import addPage from "./addPage";
import TimeZoneSelect from "@/components/TimeZoneSelect";
import {
  getList,
  deleteInfo,
  editPush,
  deletePushInfo,
  openServer,
  openScan,
  deleteBatch,
  pushBatch,
  uploadBatch,
  deletePersonBatch,
  OTAUpdateBatch,
} from "@/api/equipment/equipment";

export default {
  components: {
    editPage,
    addPage,
    TimeZoneSelect
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: null,
      current_page: null,
      last_page: null,
      per_page: null,
      multipleSelection: [], // 多选列表
      timer: "",
      listQuery: {
        name: undefined,
        company: undefined,
        department: undefined,
        status: undefined,
        type: undefined,
        page: 1,
        pagesize: 10,
      },
      delDialogVisible: false,
      btnLoading: false,
    };
  },
  created() {
    this.getLists();
  },
  mounted() {
    this.Refresh();
  },
  watch: {
    multipleSelection: function (val, oldValue) {
      // console.log("监听了");
      if (val.length <= 0) {
        this.Refresh();
      }
      if (val.length > 0) {
        // console.log("停止了");
        clearInterval(this.timer);
      }
    },
  },
  methods: {
    // 获取展示列表数据
    getLists() {
      this.listLoading = true;

      getList(store.getters.token, this.listQuery).then((res) => {
        this.list = res.data.list.data;
        this.current_page = res.data.list.current_page;
        this.per_page = res.data.list.per_page;
        this.last_page = res.data.list.last_page;
        this.total = res.data.list.total;
        this.listLoading = false;
      });
    },
    Refresh() {
      this.timer = setInterval(() => {
        // console.log("刷新了");
        getList(store.getters.token, this.listQuery).then((res) => {
          this.list = res.data.list.data;
          this.current_page = res.data.list.current_page;
          this.per_page = res.data.list.per_page;
          this.last_page = res.data.list.last_page;
          this.total = res.data.list.total;
          this.listLoading = false;
        });
      }, 3000);
    },
    // 推送设备
    push(data) {
      console.log(data);
      data.ts = 1;
      data.push = 1;
      editPush(store.getters.token, data).then((res) => {
        if (res.data.status) {
          this.$message.success(this.$t("table.operated_complete"));
          this.getLists();
        } else {
          this.$message.error(this.$t("table.operated_fail"));
        }
      });
    },
    // 同步人员信息
    sync(data) {
      console.log(data);
      data.update_data_list = 1;
      editPush(store.getters.token, data).then((res) => {
        if (res.data.status) {
          this.$message.success(this.$t("table.operated_complete"));
          this.getLists();
        } else {
          this.$message.error(this.$t("table.operated_fail"));
        }
      });
    },
    // 推送
    switchs(data) {
      data.ctrl = 1;
      data.push = 0;
      editPush(store.getters.token, data).then((res) => {
        console.log(res);
        if (res.data.status) {
          this.$message.success(this.$t("table.operated_complete"));
          this.getLists();
        } else {
          this.$message.error(this.$t("table.operated_fail"));
        }
      });
    },
    // 分页相关方法
    handleFilter() {
      this.listQuery.page = 1;
      this.getLists();
    },
    handleSizeChange(val) {
      this.listQuery.pagesize = val;
      this.getLists();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getLists();
    },
    handleSelectionChange(val) {
      this.multipleSelection = [];
      val.forEach((item) => {
        this.multipleSelection.push(item.sn);
      });
    },
    // 展示删除提示框
    // showDelDia(id) {
    //   this.delDialogVisible = true;
    //   this.del_id = id;
    // },
    // 批量删除
    deleteBatchs() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning(this.$t("equipment.select_device"));
        return;
      }
      this.$confirm(this.$t("table.delete_msg"), this.$t("table.tip"), {
        confirmButtonText: this.$t("table.complete"),
        cancelButtonText: this.$t("table.cancel"),
        type: "warning",
      }).then(() => {
        deleteBatch(store.getters.token, {
          sn: this.multipleSelection,
        }).then((res) => {
          if (res.status) {
            this.$message.success(this.$t("table.delete_complete"));
            this.getLists();
          } else {
            this.$message.error();
            this.$t("table.delete_fail");
          }
        });
      });
    },
    // 批量推送
    pushBatchs() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning(this.$t("equipment.select_device"));
        return;
      }
      pushBatch(store.getters.token, {
        sn: this.multipleSelection,
      }).then((res) => {
        if (res.status) {
          this.$message.success(this.$t("table.operated_complete"));
          this.getLists();
        } else {
          this.$message.success(this.$t("table.operated_fail"));
        }
      });
    },
    // 批量上传
    uploadBatchs() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning(this.$t("equipment.select_device"));
        return;
      }
      uploadBatch(store.getters.token, {
        sn: this.multipleSelection,
      }).then((res) => {
        if (res.status) {
          this.$message.success(this.$t("table.operated_complete"));
          this.getLists();
        } else {
          this.$message.success(this.$t("table.operated_fail"));
        }
      });
    },
    // 批量升级
    OTAUpdateBatchs() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning(this.$t("equipment.select_device"));
        return;
      }
      OTAUpdateBatch(store.getters.token, {
        sn: this.multipleSelection,
      }).then((res) => {
        if (res.status) {
          this.$message.success(this.$t("table.operated_complete"));
          this.getLists();
        } else {
          this.$message.success(this.$t("table.operated_fail"));
        }
      });
    },
    // 批量删除人员信息
    deletePersonBatchs() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning(this.$t("equipment.select_device"));
        return;
      }
      this.$confirm(
        this.$t("equipment.deletePersonTip"),
        this.$t("table.tip"),
        {
          confirmButtonText: this.$t("table.complete"),
          cancelButtonText: this.$t("table.cancel"),
          type: "warning",
        }
      ).then(() => {
        deletePersonBatch(store.getters.token, {
          sn: this.multipleSelection,
        }).then((res) => {
          if (res.status) {
            this.$message.success(this.$t("table.operated_complete"));
            this.getLists();
          } else {
            this.$message.success(this.$t("table.operated_fail"));
          }
        });
      });
    },
    // 打开扫描
    openScans() {
      this.btnLoading = true;
      setTimeout(() => {
        this.btnLoading = false;
      }, 1000);
      openScan(store.getters.token).then((res) => {
        console.log("扫描");
      });
      openServer(store.getters.token).then((res) => {
        console.log("服务器");
      });
    },
    // 删除
    del(del_id) {
      this.$confirm(this.$t("table.delete_msg"), this.$t("table.tip"), {
        confirmButtonText: this.$t("table.complete"),
        cancelButtonText: this.$t("table.cancel"),
        type: "warning",
      }).then(() => {
        deleteInfo(store.getters.token, { sn: del_id }).then((res) => {
          console.log(
            "%c res ",
            "color: white; background-color: #2274A5",
            res
          );
          if (res.data.status == true) {
            this.$message.success(this.$t("table.delete_complete"));
          } else {
            this.$message.error(this.$t("table.delete_fail"));
          }
          this.getLists();
        });
        // deletePushInfo(store.getters.token, { sn: this.del_id }).then((res) => {
        //   if (res.status == true) {
        //     i++;
        //     if (i > 1) {
        //       this.$message.success(this.$t("table.delete_complete"));
        //     }
        //   } else {
        //     this.$message.error(this.$t("table.delete_fail"));
        //   }
        //   this.getLists();
        // });
      });
    },
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timer);
    console.log("beforeDestroy");
  },
};
</script>

<style>
</style>

<style scoped>
.pagination-container {
  margin-top: 25px;
}
.filter-container {
  display: inline-block;
  margin-bottom: 8px;
  width: 100%;
}

.app-container {
  border: #eee solid 10px;
}
</style>
